<template>
    <div>
      <h1>P142 - ref函数处理基本数据类型</h1>
      <!-- 也许你想问，为啥我读取的时候不用name.value这样啊，很简单，因为vue帮你这么做了 -->
      <div>一个人的姓名:{{ name }}</div>
      <div>一个人的年龄:{{ age }}</div>
      <button @click="change">改变</button>
      <hr>
    </div>
  </template> 
  
  <script>
  import { ref } from 'vue';
  export default {
    name: "App",
    setup() {
        // 上一节我们说了，这样定义的数据可读，但是无法做到响应式。那么怎么办呢？很简单，用ref。注意此ref可不是获取节点的，而是一个方法。
        // 其实ref就是把一个数据变成了一个引用对象，这个对象的value值对应着你传的值。而你在读取或者改变这个值的时候，就会涉及到getter和setter这两个东西。如果你对这两个东西不熟悉建议百度下或者补充下js相关知识。
      let name = ref('hzj');
      let age = ref(18);
  
      function change() {
        // 注意，赋值的时候要使用 .value来赋值，而不是直接name = 'ljj';而且也不用this.了，这是写在setup函数里的，大家都在函数作用域里，不需要this
        name.value = 'ljj';
        age.value = 40;
      }
  
      // 这里要把你在setup里定义的东西return出去
      return {
        name,
        age,
        change,
      };
    },
  };
  </script>
  
  <style>
  </style>
  